<template>
  <!-- 通用页面整体容器框架 -->
  <div class="container" @contextmenu.prevent.native="handleRightMenu">
    <!-- 顶部 -->
    <page-header :disabled="disabled" :type="type" ToolBarRight></page-header>
    <!-- <page-header disabled v-bind=""></page-header> -->
    <!-- 中间部分 -->
    <div class="content-container">
      <!-- 内容区左侧 -->
      <page-left-content :type="type" :disabled="disabled"></page-left-content>
      <!-- 内容区 -->
      <slot name="content"></slot>
      <!-- 内容区右侧 -->
      <page-right-content :disabled="disabled" v-bind="$attrs"></page-right-content>
    </div>
  </div>
</template>

<script lang="ts" setup name="FilmReadPage">
//@ts-nocheck
import { ref, provide } from "vue";
import { useRoute } from "vue-router";
import * as Store from "@/store";
import PageHeader from "./components/pageHeader/index.vue";
import PageLeftContent from "./components/pageLeft/index.vue";
import PageRightContent from "./components/pageRight/index.vue";
import useRightClick from "./hooks/useRightClick";

const props = defineProps({
  type: {
    type: String,
    default: "",
  },
  isEye: {
    type: Boolean,
    defaule: true,
  },
  isColor: {
    type: Boolean,
    defaule: true,
  },
  isDel: {
    type: Boolean,
    defaule: true,
  },
});
const route = useRoute();

// 定义全局是否禁止操作属性
const disabled = ref(false);
disabled.value = route.query.type === "query";
// 初始禁用鼠标右键
const { handleRightMenu } = useRightClick();
// 获取病灶数据
const lesionData = Store.useLesionData();
// promise异步处理
lesionData.getDataList();
// 获取废片原因数据
const FilmReadRight = Store.useFilmReadRight();
FilmReadRight.fetchScrapList();
const { getFetchArData } = Store.useFilmReadHeader();
// 根据路由id获取序列号及请求配置接口
route.query.id && getFetchArData("anno/result/series/get", { taskId: +route.query.id });
// 获取顶部工具条
const toolBarList = Store.useToolBar();
toolBarList.getToolList(props.type);

const emit = defineEmits(["toolBarClick", "lesionClick"]);
provide("provideState", {
  getToolBarItem: (callback: Function) => {
    emit("toolBarClick", callback());
  },
  getLesionItem: (callback: Function) => {
    emit("lesionClick", callback());
  },
  isEye: props.isEye,
  isColor: props.isColor,
  isDel: props.isDel,
});
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.content-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: calc(100% - 94px);
}
</style>
